<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
        <swiper-slide v-for="item of SwiperList" :key="item.id">
          <a :href="item.baseURL">
            <img class="swiper-img" :src="item.imgURL">
          </a>
        </swiper-slide>
        <div class="swiper-pagination "  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// swiper options example:
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'HomeSwiper',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
    //   notNextTick: true,
      swiperOption: {
        notNextTick: true,
        // 循环
        loop: true,
        // 设定初始化时slide的索引
        initialSlide: 0,
        // 自动播放
        autoplay: true,
        // autoplay: {
        //     delay: 3000,
        //     stopOnLastSlide: false,
        //     disableOnInteraction: true,
        // },
        // 设置轮播
        // effect: 'flip',
        // 滑动速度
        speed: 2000,
        // 滑动方向
        direction: 'horizontal',
        // 小手掌抓取滑动
        // grabCursor : true,
        // 左右点击
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 分页器设置
        pagination: '.swiper-pagination',
        paginationClickable: true
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // }
      },
      swiperSlides: [1, 2, 3]
    }
  },
  props: {
    SwiperList: Array
  }
}
</script>

<style>
.swiper-img {
    width: 100%;
}

.wrapper {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 38%;
    background: pink;
}
</style>
